<template>
	<div class="p-6 space-y-6">

		<el-button type="primary" size="small" class="mb-4" @click="openCreateDialog">新建仓库</el-button>

		<el-table :data="warehouses" border>
			<el-table-column type="index" label="#" width="50" />
			<el-table-column prop="code" label="仓库编码" />
			<el-table-column prop="name" label="仓库名称" />
			<el-table-column prop="location" label="位置" />
			<el-table-column prop="area" label="面积 (㎡)" />
			<el-table-column prop="manager" label="负责人" />
			<el-table-column label="操作">
				<template #default="{ row }">
					<el-button size="small" @click="editWarehouse(row)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog v-model="editDialog" :title="isNew ? '新建仓库' : '编辑仓库'" width="500px">
			<el-form :model="currentWarehouse" label-width="80px" :rules="rules" ref="formRef">
				<el-form-item label="编码" prop="code">
					<el-input v-model="currentWarehouse.code" :disabled="!isNew" />
				</el-form-item>
				<el-form-item label="名称" prop="name">
					<el-input v-model="currentWarehouse.name" />
				</el-form-item>
				<el-form-item label="位置" prop="location">
					<el-input v-model="currentWarehouse.location" />
				</el-form-item>
				<el-form-item label="面积" prop="area">
					<el-input-number v-model="currentWarehouse.area" :min="0" />
				</el-form-item>
				<el-form-item label="负责人" prop="manager">
					<el-input v-model="currentWarehouse.manager" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="saveWarehouse">保存</el-button>
					<el-button @click="editDialog = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const warehouses = ref([])
const editDialog = ref(false)
const isNew = ref(false)
const formRef = ref()
const currentWarehouse = ref({ code: '', name: '', location: '', area: 0, manager: '' })

const openCreateDialog = () => {
	isNew.value = true
	currentWarehouse.value = { code: 'WH' + Math.floor(Math.random() * 100000), name: '', location: '', area: 0, manager: '' }
	editDialog.value = true
}

const editWarehouse = (row) => {
	isNew.value = false
	currentWarehouse.value = { ...row }
	editDialog.value = true
}

const saveWarehouse = () => {
	formRef.value.validate(valid => {
		if (!valid) return

		if (isNew.value) {
			warehouses.value.unshift({ ...currentWarehouse.value })
			ElMessage.success('已新建仓库')
		} else {
			const index = warehouses.value.findIndex(i => i.code === currentWarehouse.value.code)
			if (index !== -1) {
				warehouses.value[index] = { ...currentWarehouse.value }
				ElMessage.success('仓库已保存')
			}
		}
		editDialog.value = false
	})
}

const rules = {
	code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
	name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
	location: [{ required: true, message: '请输入位置', trigger: 'blur' }],
	area: [{ required: true, message: '请输入面积', trigger: 'blur' }],
	manager: [{ required: true, message: '请输入负责人', trigger: 'blur' }]
}

onMounted(() => {
	warehouses.value = Array.from({ length: 5 }).map((_, i) => ({
		code: 'WH' + (10000 + i),
		name: `仓库${i + 1}`,
		location: `位置${i + 1}`,
		area: Math.floor(Math.random() * 1000) + 100,
		manager: ['张三', '李四', '王五'][i % 3]
	}))
})
</script>

<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>
  
